<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 链接外部样式文件 bootstrap.min.css -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- 引入 jQuery 核心 JavaScript 文件 -->
    <script src="jquery/jquery-3.6.0.min.js" type="text/javascript"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="bootstrap/js/bootstrap.bundle.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        
        .head {
            height: 40px;
            line-height: 40px;
            background-color: #333333;
            font-size: 12px;
            color: white;
            min-width: 1536px;
        }
        
        .mi-nav {
            padding: 0;
            margin: 0;
        }
        
        .head a {
            display: inline-block;
            height: 18px;
            line-height: 18px;
            text-decoration: none;
            padding: 0;
            margin: 0;
            color: #b0b0b0;
        }
        
        .sep {
            color: #424242;
            font-weight: 200;
        }
        
        .head a:hover {
            color: white;
        }
        
        .padding {
            padding-left: 1px;
            padding-right: 1px;
        }
        
        .padding-left {
            padding-left: 15px;
        }
        
        .car {
            background-color: #424242;
        }
        
        .home-hero-sub {
            width: 1240px;
            height: 170px;
            margin: 0 auto;
            background-color: #dedede;
        }
    </style>
</head>

<body>
    <div class="container-fluid head">
        <div class="row">
            <div class="col-1 "></div>
            <div class="col-10  row">
                <div class="col-8 row">
                    <nav class="navbar navbar-expand-sm mi-nav">

                        <!-- Links -->
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link " href="#">小米商城</a>
                                <span class="sep">|</span>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">MUI</a>
                                <span class="sep">|</span>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">loT</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">云服务</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">天星科技</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">有品</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">小爱开放平台</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">企业团购</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">资质证照</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">协议规则</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">下载app</a>

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">智能生活</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"> Select Location</a>
                            </li>
                        </ul>

                    </nav>
                </div>
                <div class="col-4 row">
                    <div class="col-1 offset-4 padding">
                        <a href="#">登录</a>
                        <span class="sep">|</span>
                    </div>
                    <div class="col-1 padding">
                        <a href="#">注册</a>
                        <span class="sep">|</span>
                    </div>
                    <div class="col-3 padding padding-left">
                        <a href="#">消息通知</a>

                    </div>
                    <div class="col-3 padding car">
                        <a href="#">
                            购物车(0)
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-1"></div>
        </div>
    </div>
    <div class="home-hero-sub">

    </div>
</body>

</html>